<template>
<div>
  <el-tree  class="tree"
    :data="data" 
    :props="defaultProps" 
    @node-click="handleNodeClick"
  ></el-tree>
</div>
</template>
 
<script>
import Vue from 'vue';
import { Tree ,Notification} from 'element-ui';
import config from "@/config/config";
import {baseAxios} from "@/api/api.js";
Vue.use(Tree );
Vue.prototype.$notify = Notification;

export default {
   data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        svnUrl: config.svnUrl,//后面会更改为从页面传递方式
        permitList: []
      };
    },
    beforeMount() {
      var query=this.$route.query;
      if(query.svnUrl) {
        this.svnUrl = query.svnUrl;
      }
      console.log('this.svnUrl',this.svnUrl);
      this.getPermitList();
      console.log('www',document.documentElement.clientHeight);
    },
    mounted(){
      
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        if(data.type == 'file') {//具体的文件
          let label = data.label;
          let lang = 'typescript';
          if(/\.[js|htm|json|css]/.test(label)){
            if(label.indexOf('.json') > -1){//json文件
              lang = 'json';
            } else if(label.indexOf('.css') > -1){//css文件
              lang = 'css';
            } else if(label.indexOf('.htm') > -1){//htm,html文件
              lang = 'html';
            }
            //test
            this.getContent(data,lang);
          } else {//其他文件类型
            this.getContent(data,'html');//其他全部按html
          } 
        } else {
          this.getSub(data);
        }

      },

      async getSub(d) {
        var self = this;
        let res = await baseAxios('GET',config.server, config.list,{
          svnUrl:this.svnUrl+d.path
        });

        if(res.data.ret) {
          let list = res.data.list[0].entry;
          let newArr = [];
          list.map((v,i) => {
            newArr[i] = {};
            newArr[i].label = v.name.val;
            newArr[i].type = v._attr.kind;
            newArr[i].path = d.path;
            if(v._attr.kind == 'dir') {
              newArr[i].children = [{label:'loading...'}];
              newArr[i].path = d.path + v.name.val + '/';
              newArr[i].deep = d.deep.concat([i]);//记录数组的位置信息
            }
          })
          this.setSubTree(newArr,d.deep);
          //self.getCurrArr(d.deep,self.data) = newArr;
        } else {
          this.$notify.error({message: 'getList error'});
        }
      },

      setSubTree(arr,deep) {//比较笨的方法，先做三层
        if(deep.length == 1) {
          this.data[deep[0]].children = arr;
        } else if(deep.length == 2) {
          this.data[deep[0]].children[deep[1]].children = arr;
        } else if(deep.length == 3) {
          this.data[deep[0]].children[deep[1]].children[deep[2]].children = arr;
        }
      },

      async getContent(d,lang) {//换成ajax从服务器获取
        //调用父组件的openPage方法，第二个参数换成ajax获取的内容
        let self = this;
        //console.log('getContent----',label);
        let res = await baseAxios('POST',config.server, config.cat,{
          svnUrl:self.svnUrl + d.path + d.label,
          downloadFlag:-1
        });
        this.$parent.openPage(res.data,lang);
      },

      //获取文件目录
      async getTree() {
        var self = this;
        let res = await baseAxios('GET',config.server, config.list,{
          svnUrl:this.svnUrl
        });
        if(res.data.ret) {
          let list = res.data.list[0].entry;
          let newArr = [];
          list.map((v,i) => {
            newArr[i] = {};
            newArr[i].label = v.name.val;
            newArr[i].type = v._attr.kind;
            newArr[i].path = ''
            if(v._attr.kind == 'dir') {
              newArr[i].children = [{label:'loading...'}];
              newArr[i].path = v.name.val + '/';
              newArr[i].deep = [i];//记录数组的位置信息
            }
          })
          self.data = newArr;
        } else {
          this.$notify.error({message: 'getList error'});
        }
      },
      
      getCurrArr(deep,arr) {
        if(deep.length > 1) {
          let i = deep.shift()
          return this.getCurrArr(deep,arr[i].children);
        } else {
          return arr[deep[0]].children;
        }
      },

      async getPermitList() {
        let permit = await baseAxios('GET',config.server, config.permitList,{});
        if(permit.data.ret) {
          this.permitList = permit.data.data;
          // if(this.permitList.length > 1) {
          //   this.svnUrl = this.permitList[2].path;
          // } else {
          //   this.svnUrl = this.permitList[0].path;//暂时修改先用第一个
          // }
          if(this.checkUserPermit()) {//有权限
              this.getTree();
              //  this.$notify({
              //   message: '这是一条成功的提示消息',
              //   type: 'success'
              // });
          } else {
            this.$notify.error({message: '用户无该svn权限'});
          }
        } else {
          this.$notify.error({message: 'getPermitList error'});
        }
      },
      
      checkUserPermit() {//判断是否有权限
        for(let i=0; i< this.permitList.length;i++) {
          if(this.svnUrl.indexOf(this.permitList[i].path) == 0) {
            return true;
          }
        }
        return false;
      }
    }
}
</script>
<style scoped>
  .tree {
    position:absolute;
    left: 0px;
    top: 48px;
    width: 100%;
    height: 100%;
    min-height: 605px;
    overflow:auto;
  }

  ::-webkit-scrollbar{
    width:3px;
    height:20px;
    }

</style>

<style>
  .el-tree {
    background-color: #252526;
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #094771 !important;
  }
  .el-tree-node__content:hover {background-color: #2a2d2e;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #094771;
  }
  .el-tree-node__label {
    font-size: 16px;
    color: #ddd;
    opacity: 0.95;
  }
</style>